//1.引入gulp

//模块化语法 common.js

const gulp = require('gulp');

//引入压缩css代码的依赖

const cssMin = require('gulp-cssmin')

//引入自动加前缀的依赖

const autoPrefixer = require('gulp-autoprefixer')


//引入处理sass的依赖

const sass = require("gulp-sass");


//引入压缩js的依赖

const ugli = require("gulp-uglify")

//引入babel编译器

const babel = require("gulp-babel")

//引入压缩html依赖

const html = require("gulp-htmlmin")


//引入托管服务

const webServer = require("gulp-webserver")

//引入清除文件夹内容的依赖

const clean = require("gulp-clean");



//2.指定任务



gulp.task("miniCss", () => gulp
    .src("./src/css/**") //压缩src目录下css目录中的所有css文件
    .pipe(autoPrefixer({
        overrideBrowserslist: [
            "> 1%", //全球使用情况统计选择的浏览器版本
            "last 2 versions" //每个浏览器的最后两个版本
        ]
    }))
    .pipe(cssMin())
    .pipe(gulp.dest("./dist/css")) //指定压缩之后的css代码放置的目录是什么
)

//处理压缩sass
gulp.task("miniSass", () => gulp
    .src("./src/scss/**")
    .pipe(sass())
    .pipe(autoPrefixer({
        overrideBrowserslist: [
            "> 1%", //全球使用情况统计选择的浏览器版本
            "last 2 versions" //每个浏览器的最后两个版本
        ]
    }))
    .pipe(cssMin())
    .pipe(gulp.dest("./dist/css"))
)

//处理js的任务

gulp.task("miniJs", () => gulp
    .src("./src/js/**")
    .pipe(babel({
        presets: ["@babel/preset-env"] //babel预设 将语法转换成当前浏览器兼容的代码
    }))
    .pipe(ugli())
    .pipe(gulp.dest("./dist/js"))
)

//压缩html

gulp.task('miniHtml', () => gulp
    .src("./src/pages/**")
    .pipe(html({
        removeEmptyAttributes: true, //移除空属性
        collapseWhitespace: true //压缩空格
    }))
    .pipe(gulp.dest("./dist/pages"))
)

//处理静态资源
gulp.task('assets', () =>
    gulp.src("./src/images/**")
    .pipe(gulp.dest("./dist/images"))
)


//服务器托管页面

gulp.task('webServer', () => gulp
    .src("./dist")
    .pipe(webServer({
        host: "localhost", //主机名
        port: 2103, //端口
        livereload: true, //是否热更新,文件修改之后,直接刷新页面不用手动刷新
        open: "./pages/index.html" //默认打开的页面
    }))
)


//清除文件
gulp.task('clean', () => gulp
    .src("./dist")
    .pipe(clean())
)

//观察代码的变化,如果变化了重新打包压缩处理代码

gulp.task("watch", () => gulp.watch("./src/**", gulp.series("clean", "miniCss", "miniSass", "miniJs", "miniHtml", "assets", (done) => {
    console.log('完成更新');
    done()
})))

//批量处理任务,default任务会在执行 npx gulp的时候默认调用

gulp.task('default', gulp.series("miniCss", "miniSass", "miniJs", "miniHtml", "assets", "webServer", "watch", (done) => {
    console.log('任务批量处理完成');
    done() //任务处理结束调用done
}))